﻿<!DOCTYPE html>
<html manifest="cache_EN.manifest" lang="en-US">
<head>
    <title>Capokun - The mobile site for browsing an ever-expanding collection of Capoeira
        songs</title>
    <meta name="description" content="This site is optimized for mobile devices. Users can easily browse the collection of Capoeira songs and add them as favorites. Offline cache is also used so that uers can access this page when offline or bad connections" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/png" href="./Content/images/Capokun_16.png" />
    <link rel="apple-touch-icon" href="./Content/images/Capokun_64.png" />
    <link rel="apple-touch-icon-precomposed" href="./Content/images/Capokun_64.png" />
    <link rel="stylesheet" type="text/css" href="Content/jquery.mobile-1.1.0.min.css" />
    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.mobile-1.1.0.min.js"></script>
    <!--<script type="text/javascript" src="./Scripts/modernizr-1.7.min.js"></script>-->
    <script src="./Scripts/Main.js" type="text/javascript"></script>
    <script src="./Scripts/jstorage.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            documentReady();
        });

        $('#listViewPage').live('pageinit', function (event) {
            getSongTitles();
        });
        $('#listViewPageFav').live('pageshow', function (event) {
            getFavorites();
        });
        
    </script>
   <!--<script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-26321122-1']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>-->
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="header" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li>
                        <a href="#home" class="ui-btn-active ui-state-persist" data-icon="home">Home</a></li>
                    <li>
                        <a href="#listViewPage" data-icon="search">Browse</a></li>
                    <li>
                        <a href="#listViewPageFav" data-icon="star">Favs</a></li>
                </ul>
            </div>
            <!-- /navbar -->
        </div>
        <!-- /header -->
        <div data-role="content">
            <p>
                Welcome to Capokun's songs application.
                <br />
                This application can be viewed offline. Add a bookmark to this page and you will
                be able to access it while offline.<br />
            </p>
            <p>
                Click on "Browse" to access the list of capoeira songs songs. This step requires
                an internet connection.
            </p>
            <p>
                You have the ability to add songs to your favorites. These can then be easily accessed
                in the "Fav" menu.
            </p>
            <!--  <a data-role="button" href="#listViewPageFav">Load Offline Songs</a> <a data-role="button"
                href="#listViewPage">Load Online Songs</a>-->
            <!--  <p>
                If this website has been very usefull to you, consider making a donation via paypal:</p>
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick" />
            <input type="hidden" name="hosted_button_id" value="7ZUEKSN6ZWXAW" />
            <input type="submit" value="Donate" />
            </form>-->
        </div>
        <!-- /content -->
    </div>
    <!-- /page -->
    <div data-role="page" id="listViewPage">
        <div data-role="header" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li>
                        <a href="#home" data-icon="home">Home</a></li>
                    <li>
                        <a href="#listViewPage" class="ui-btn-active ui-state-persist" data-icon="search">Browse</a></li>
                    <li>
                        <a href="#listViewPageFav" data-icon="star">Favs</a></li>
                </ul>
            </div>
            <!-- /navbar -->
        </div>
        <!-- /header -->
        <div data-role="content">
            <ul data-role="listview"  data-filter="true" id="listSongs">
            </ul>
        </div>
        <!-- /content -->
    </div>
    <!-- /page -->
    <div data-role="page" id="listViewPageFav">
        <div data-role="header" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li>
                        <a href="#home" data-icon="home">Home</a></li>
                    <li>
                        <a href="#listViewPage" data-icon="search">Browse</a></li>
                    <li>
                        <a href="#listViewPageFav" data-icon="star" class="ui-btn-active ui-state-persist">Favs</a></li>
                </ul>
            </div>
            <!-- /navbar -->
        </div>
        <!-- /header -->
        <div data-role="content">
            <ul data-role="listview"  data-filter="true" id="listSongsFavorites">
                <!--   @foreach (var song in Model)
        {
            <li><a href="./Mobile/Song/")@song">@song</a></li>
        }-->
            </ul>
        </div>
        <!-- /content -->
    </div>
    <!--2nd page : shows song-->
    <div data-role="page" id="songPage">
        <div data-role="header" data-position="inline">
            <a href="#home" data-icon="back" data-rel="back">Back</a>
            <h1>
                Capokun mobile</h1>
            <!--<a href="#listViewPageFav" data-icon="star" class="ui-btn-active ui-state-persist">Add to favorites</a>-->
            <!-- /navbar -->
        </div>
        <!-- /header -->
        <div data-role="content" id="songContent">
            <p>
            </p>
        </div>
        <!-- /content -->
    </div>
</body>
</html>
